#CSS 奇技淫巧

[TOC]

• 如何让 Button 不换行，适应文字长度？ 我们经常用固定的大小限定 button 的 width， 但是一旦 button 文字长度过长就会出现换行的情况。针对某个 button 修改长度的方法也不理想，因为字体大小有时会随着 rem 的变化而变化，所以整理出下面两个方法：

  1. width: fit-content

     ``fit-content` 是一个新出的属性，可以根据文字的长度来调节 wrapper 的长度。具体使用案例如下：

     .button-normal {
       width: fit-content;
       width: -moz-fit-content;
       padding: 0 3rem;
       line-height: 5.4rem;
     }
     

     但是需要注意的是，firefox 下需要添加 -moz- 前缀（Autoprefixer 暂时没有添加支持），IE 不支持该属性

  2. display: table

     因为 IE 不支持上述方法，所以还有一个通配的方法，利用古老的 table

     .button-normal {
       width: auto;
       display: table;
       padding: 0 3rem;
     }
     

     同样可以达到一样的效果，并且支持所有浏览器。